<template>
  <div class="contact-book-item" style="width: 100%" :data-account="account">
    <div
      class="row-div member"
      style="display: flex; justify-content: space-between; align-items: center; width: 100%; height: 50px"
    >
      <div class="member-id" style="flex: auto; width: auto; min-width: 0; display: flex; align-items: center">
        <svg
          t="1631801549043"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7087"
          style="flex: none; width: 24px; height: 24px; margin-right: 3px; fill: #ffffff"
        >
          <path
            d="M164.655 68.977l0 0 0 0zM866.321 769.149q0 59.804-36.377 94.437t-96.684 34.632l-435.544 0q-60.293 0-96.684-34.632t-36.377-94.437q0-26.414 1.744-51.573t6.977-54.321 13.2-54.069 21.432-48.586 30.892-40.367 42.614-26.665 55.563-9.963q4.479 0 20.931 10.717t37.131 23.916 53.819 23.916 66.531 10.717 66.531-10.717 53.819-23.916 37.131-23.916 20.931-10.717q30.405 0 55.563 9.963t42.614 26.665 30.893 40.367 21.432 48.586 13.2 54.069 6.977 54.321 1.744 51.573zM706.846 324.131q0 79.242-56.065 135.292t-135.293 56.065-135.293-56.065-56.065-135.292 56.065-135.293 135.293-56.065 135.293 56.065 56.065 135.293z"
            p-id="7088"
          ></path>
        </svg>
        <div style="flex: auto; width: auto; min-width: 0; display: block; line-height: 1.1">
          <div
            style="
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 14px;
              margin-bottom: 3px;
            "
            :title="name + (unit_name ? '（' + unit_name + '）' : '')"
          >
            {{ name + (unit_name ? '（' + unit_name + '）' : '') }}
          </div>
          <div
            v-if="area_name && type_name"
            style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px"
            :title="area_name + type_name"
          >
            {{ area_name + type_name }}
          </div>
        </div>
      </div>
      <div class="row-div" style="flex: none; width: 100px; height: 26px; justify-content: flex-end">
        <call-btn
          v-if="showCaller"
          v-bind="btnAttrs"
          class="call-btn"
          color="#fff"
          size="30"
          cursor="pointer"
          :click="onCall"
        />
        <div style="width: 7px"></div>
        <camera-btn
          v-if="showCamera"
          v-bind="btnAttrs"
          class="camera-btn"
          :account="account"
          :click="onCameraClick"
          style="width: 30px; height: 30px"
        />
        <div style="width: 7px"></div>
        <voice-btn
          v-if="showVoice"
          v-bind="btnAttrs"
          class="voice-btn"
          style="width: 30px; height: 30px"
          :click="onVoiceClick"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { omit } from 'lodash-es';
import { callVideoConferencing } from './index.js';
import CallBtn from './call-center-line.vue';
import CameraBtn from './camera-btn.vue';
import VoiceBtn from './voice-btn.vue';

export default {
  name: 'contact-book-item',
  components: { CallBtn, VoiceBtn, CameraBtn },
  props: {
    account: String,
    name: String,
    area_name: String,
    unit_name: String,
    type_name: String,
    phone: String,
    roomId: String,
    showCaller: Boolean,
    showCamera: { type: Boolean, default: true },
    showVoice: { type: Boolean, default: true },
    onCallClick: { type: Function, default: undefined },
    onCameraClick: { type: Function, default: undefined },
    onVoiceClick: { type: Function, default: undefined },
  },
  computed: {
    btnAttrs() {
      return { ...omit(this.$attrs, ['style', 'class']), ...this.$props };
    },
  },
  methods: {
    onCall() {
      if (typeof this.onCallClick === 'function') {
        this.onCallClick(this.btnAttrs);
        return;
      }
      callVideoConferencing({
        account: this.account,
        name: this.name,
        roomId: this.roomId,
      });
    },
  },
};
</script>
